<template>
	<view class="box">
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" v-model="searchinput" placeholder="请输入你想搜索的内容"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round" @click="search">搜索</button>
			</view>
		</view>
		<scroll-view scroll-x="true" class="tab">
			<view class="tab_item scroll-view-item_H" v-for="(item,index) in classlist" :key="index" @click="selectclass(index)">
				<view class="img">
					<image :src="imageurl + item.image" mode=""></image>
				</view>
				<text :class="classindex==index?'active name':'name'">{{item.classifyName}}</text>
			</view>
		</scroll-view>
		<view class="list" v-for="(item,index) in shoplist" :key="index">
			<view class="list_item" @click="gotoStore(item.id)">
				<view class="img">
					<image :src="imageurl + item.image" mode=""></image>
				</view>
				<view class="list_content">
					<view class="boxs">
						<text class="shopName">{{item.name}}</text>
						<text class="Grade">{{item.duration}}</text>
					</view>

					<text class="address">{{item.projectIntroduce}}</text>
				</view>
				<view class="distance">
					查看详情
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				InputBottom: 0,
				shopid: '',//店铺id
				page: 1, //列表页码
				classlist:[],//分类列表
				imageurl:this.$imgurl,
				classindex:0,
				shoplist:[],//项目列表
				searchinput:'',//搜索内容
			}
		},
		onLoad(option) {
			this.shopid = option.id
			this.getprojectlist()
			
		},
		methods: {
			//搜索
			search(){
				var that = this
				var data = {}
				console.log('输入',data)
				var http = '/api/user/store/search/' + that.searchinput + '/' + 1 + '?limit=' + 20 + '&page=' + that.page
				console.log('请求方式', http)
				that.$http(http, 'GET', data).then((res) => {
					console.log('返回商品列表', res.data.data.list)
					// if (res.data.data.list.length <= 0) {
					// 	--that.page
					// 	console.log("已经到底了")
					// 	uni.showToast({
					// 		title: "已经到底了！",
					// 		icon: "none"
					// 	})
					// 	return false
					// }
					that.shoplist = res.data.data.list
				})
			},
			//选择分类
			selectclass(index){
				this.classindex = index
				this.getshoplist()
			},
			//根据分类获取列表
			getshoplist(){
				var that = this
				var data = {
					// classifyId:that.classlist[that.classindex].id,
					// storeId: 1 //that.shopid
				}
				var http = '/api/user/store/list/' + '1' + '/' + that.classlist[that.classindex].id +'?' + 'limit=' + 6 + '&page=' + that.page
				console.log('请求方式', http)
				that.$http(http, 'GET', data).then((res) => {
					// if (res.data.data.list.length <= 0) {
					// 	--that.page
					// 	console.log("已经到底了")
					// 	uni.showToast({
					// 		title: "已经到底了！",
					// 		icon: "none"
					// 	})
					// 	return false
					// }
					console.log('返回商品列表', res.data.data.list)
					that.shoplist = res.data.data.list
				})
			},
			//获取分类
			getprojectlist() {
				var that = this
				var data = {}
				var http = '/api/user/store/classifyList/' + 1   //待定
				console.log('请求方式', http)
				that.$http(http, 'GET', data).then((res) => {
					// if (res.data.data.list.length <= 0) {
					// 	--that.page
					// 	console.log("已经到底了")
					// 	uni.showToast({
					// 		title: "已经到底了！",
					// 		icon: "none"
					// 	})
					// 	return false
					// }
					// that.shopplist = that.shopplist.concat(res.data.data.list)
					console.log('返回商品分类', res.data.data.list)
					that.classlist = res.data.data.list
					this.getshoplist()
				})
			},

			// 详情
			gotoStore(id) {
				console.log('我要id',id)
				uni.navigateTo({
					url: '../projectDetails/projectDetails?id=' + id
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
	}

	.box {
		width: 100%;
		height: 100%;

		.tab {
			// width: 100%;
			min-width: 750rpx;
			// overflow-x: auto;
			height: 250rpx;
			display: flex;
			border-bottom: 3px solid #eee;
			white-space: nowrap;

			// flex-wrap:nowrap;
			.tab_item {
				width: 187.5rpx;
				height: 100%;
				display: inline-block;
				text-align: center;
				.name{
					padding: 4rpx 6rpx;
					border-radius: 50rpx;
					color: #f49c1c;
					border: 1rpx solid #f49c1c;
					font-size: 24rpx;
				}
				.active{
					background-color: #f49c1c;
					color: #FFFFFF;
				}
				.img {
					margin: 20rpx auto;
					
					width: 150rpx;
					height: 150rpx;
					image{
						border-radius: 50%;
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.list {
			border-bottom: 1rpx solid #ECECEC;

			.list_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10rpx;
				padding: 20rpx 40rpx;
				font-size: 25rpx;
				box-sizing: border-box;

				.img {
					image {
						border-radius: 20rpx;
					}
				}

				.list_content {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					line-height: 50rpx;
					width: 435rpx;

					.boxs {
						display: flex;
						align-items: center;

						.shopName {
							font-weight: bold;
							font-size: 30rpx;
						}

						.Grade {
							width: 80rpx;
							height: 30rpx;
							background-color: #f49c1c;
							color: #FFFFFF;
							margin-left: 10rpx;
							border-radius: 50rpx;
							font-size: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}


					.address {
						overflow: hidden;
						text-overflow: ellipsis;
						max-height: 434rpx;
						height: 91rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-all;
						word-wrap: break-word;
						font-size: 24rpx;
						color: rgba(127, 127, 127, 0.9);
					}
				}

				.distance {
					margin-top: 105rpx;
					color: #C5C2C2;
				}

				.img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
